<template>
  <div class="user-type-switcher">
    <!-- 当前用户信息 -->
    <div class="glass-card p-4 mb-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <div class="w-12 h-12 rounded-full bg-gradient-to-r from-electric-500 to-tech-blue-500 flex items-center justify-center">
            <component :is="getUserIcon(currentUser.type)" class="w-6 h-6 text-white" />
          </div>
          <div>
            <h3 class="text-white font-semibold">{{ currentUser.name || ts('未登录用户', '未登录用户') }}</h3>
            <p class="text-electric-500 text-sm">{{ getUserTypeConfig(currentUser.type).name }}</p>
          </div>
        </div>
        <div class="flex items-center space-x-2">
          <div class="text-xs px-2 py-1 bg-electric-500/20 text-electric-500 rounded">
            {{ currentUser.level || 'basic' }}
          </div>
          <button
            @click="showSwitcher = !showSwitcher"
            class="p-2 bg-white/10 rounded-lg hover:bg-white/20 transition-colors"
          >
            <Settings class="w-4 h-4 text-white" />
          </button>
        </div>
      </div>
    </div>

    <!-- 用户类型切换器 -->
    <div v-if="showSwitcher" class="glass-card p-6 mb-6">
      <div class="flex items-center justify-between mb-4">
        <h4 class="text-lg font-semibold text-white">{{ ts('切换用户类型', '切换用户类型') }}</h4>
        <button 
          @click="showSwitcher = false"
          class="text-gray-400 hover:text-white"
        >
          <X class="w-5 h-5" />
        </button>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div
          v-for="(config, type) in userTypeConfigs"
          :key="type"
          @click="switchUserType(type)"
          :class="[
            'user-type-card p-4 rounded-lg border-2 cursor-pointer transition-all duration-300',
            currentUser.type === type 
              ? 'border-electric-500 bg-electric-500/10' 
              : 'border-white/20 bg-white/5 hover:border-electric-500/50 hover:bg-white/10'
          ]"
        >
          <div class="flex items-start space-x-3">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-electric-500 to-tech-blue-500 flex items-center justify-center">
              <component :is="getUserIcon(type)" class="w-5 h-5 text-white" />
            </div>
            <div class="flex-1">
              <h5 class="text-white font-semibold mb-1">{{ config.name }}</h5>
              <p class="text-white/70 text-sm mb-2">{{ config.description }}</p>
              <div class="flex flex-wrap gap-1">
                <span
                  v-for="feature in config.features.slice(0, 3)"
                  :key="feature"
                  class="text-xs px-2 py-1 bg-tech-blue-500/20 text-tech-blue-300 rounded"
                >
                  {{ getFeatureName(feature) }}
                </span>
                <span
                  v-if="config.features.length > 3"
                  class="text-xs px-2 py-1 bg-gray-500/20 text-gray-400 rounded"
                >
                  +{{ config.features.length - 3 }}
                </span>
              </div>
            </div>
          </div>
          
          <!-- 选中标识 -->
          <div v-if="currentUser.type === type" class="absolute top-2 right-2">
            <div class="w-3 h-3 bg-electric-500 rounded-full"></div>
          </div>
        </div>
      </div>
      
      <!-- 演示登录按钮 -->
      <div class="mt-6 pt-4 border-t border-white/20">
        <h5 class="text-white font-medium mb-3">{{ ts('快速演示登录', '快速演示登录') }}</h5>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
          <button
            v-for="(config, type) in userTypeConfigs"
            :key="`demo-${type}`"
            @click="demoLogin(type)"
            class="px-3 py-2 bg-gradient-to-r from-electric-500/20 to-tech-blue-500/20 text-electric-500 rounded-lg hover:from-electric-500/30 hover:to-tech-blue-500/30 transition-colors text-sm"
          >
            {{ ts('登录为', '登录为') }}{{ config.name }}
          </button>
        </div>
      </div>
    </div>

    <!-- 功能说明 -->
    <div v-if="currentUser.isLoggedIn && getUserTypeConfig(currentUser.type)" class="glass-card p-6">
      <h4 class="text-lg font-semibold text-white mb-4 flex items-center">
        <Sparkles class="w-5 h-5 mr-2 text-yellow-400" />
        {{ ts('专属功能', '专属功能') }}
      </h4>
      
      <div class="space-y-4">
        <!-- Agent服务 -->
        <div>
          <h5 class="text-white font-medium mb-2 flex items-center">
            <Bot class="w-4 h-4 mr-2 text-tech-blue-400" />
            {{ ts('智能Agent服务', '智能Agent服务') }}
          </h5>
          <div class="flex flex-wrap gap-2">
            <span
              v-for="service in getUserTypeConfig(currentUser.type).agentServices"
              :key="service"
              class="text-xs px-2 py-1 bg-tech-blue-500/20 text-tech-blue-300 rounded"
            >
              {{ getServiceName(service) }}
            </span>
          </div>
        </div>
        
        <!-- 仪表板功能 -->
        <div>
          <h5 class="text-white font-medium mb-2 flex items-center">
            <Layout class="w-4 h-4 mr-2 text-green-400" />
            {{ ts('仪表板功能', '仪表板功能') }}
          </h5>
          <div class="flex flex-wrap gap-2">
            <span
              v-for="section in getUserTypeConfig(currentUser.type).dashboardSections"
              :key="section"
              class="text-xs px-2 py-1 bg-green-500/20 text-green-300 rounded"
            >
              {{ getSectionName(section) }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useTranslation } from '../composables/useTranslation.js'
import { 
  currentUser, 
  userTypeConfigs, 
  USER_TYPES,
  userService 
} from '../services/userService.js'
import {
  Settings,
  X,
  Building,
  User,
  Shield,
  GraduationCap,
  Bot,
  Layout,
  Sparkles
} from 'lucide-vue-next'

export default {
  name: 'UserTypeSwitcher',
  components: {
    Settings,
    X,
    Building,
    User,
    Shield,
    GraduationCap,
    Bot,
    Layout,
    Sparkles
  },
  
  setup() {
    const { ts } = useTranslation()
    const showSwitcher = ref(false)
    
    // 获取用户类型图标
    const getUserIcon = (type) => {
      const iconMap = {
        [USER_TYPES.ENTERPRISE]: Building,
        [USER_TYPES.INDIVIDUAL]: User,
        [USER_TYPES.GOVERNMENT]: Shield,
        [USER_TYPES.ACADEMIC]: GraduationCap
      }
      return iconMap[type] || User
    }
    
    // 获取用户类型配置
    const getUserTypeConfig = (type) => {
      return userService.getUserTypeConfig(type)
    }
    
    // 切换用户类型
    const switchUserType = (type) => {
      if (userService.switchUserType(type)) {
        showSwitcher.value = false
        // 触发页面刷新以更新所有组件
        window.location.reload()
      }
    }
    
    // 演示登录
    const demoLogin = (type) => {
      const mockData = userService.getMockUserData(type)
      userService.login(mockData)
      showSwitcher.value = false
      // 触发页面刷新以更新所有组件
      window.location.reload()
    }
    
    // 获取功能名称
    const getFeatureName = (feature) => {
      const nameMap = {
        'enterprise_dashboard': '企业仪表板',
        'personal_dashboard': '个人仪表板',
        'government_dashboard': '政府仪表板',
        'research_dashboard': '研究仪表板',
        'bulk_policy_analysis': '批量政策分析',
        'compliance_monitoring': '合规监控',
        'team_collaboration': '团队协作',
        'advanced_analytics': '高级分析',
        'dedicated_agent': '专属代理',
        'priority_support': '优先支持',
        'policy_recommendations': '政策推荐',
        'bookmark_system': '收藏系统',
        'notification_center': '通知中心',
        'basic_analytics': '基础分析',
        'policy_impact_analysis': '政策影响分析',
        'public_service_tools': '公共服务工具',
        'data_analysis_tools': '数据分析工具',
        'research_collaboration': '研究协作',
        'publication_support': '发表支持'
      }
      return nameMap[feature] || feature
    }
    
    // 获取服务名称
    const getServiceName = (service) => {
      const nameMap = {
        'policy_monitoring': '政策监控',
        'compliance_alerts': '合规警报',
        'risk_assessment': '风险评估',
        'opportunity_identification': '机会识别',
        'automated_reporting': '自动报告',
        'personal_recommendations': '个人推荐',
        'deadline_reminders': '截止提醒',
        'policy_updates': '政策更新',
        'basic_analysis': '基础分析',
        'policy_impact_monitoring': '政策影响监控',
        'regulatory_compliance': '监管合规',
        'public_feedback_analysis': '公众反馈分析',
        'inter_agency_coordination': '机构间协调',
        'research_assistance': '研究协助',
        'data_collection': '数据收集',
        'trend_analysis': '趋势分析',
        'literature_review': '文献综述'
      }
      return nameMap[service] || service
    }
    
    // 获取板块名称
    const getSectionName = (section) => {
      const nameMap = {
        'company_overview': '公司概览',
        'policy_compliance': '政策合规',
        'risk_dashboard': '风险仪表板',
        'opportunity_tracker': '机会跟踪',
        'team_management': '团队管理',
        'reporting_center': '报告中心',
        'personal_overview': '个人概览',
        'recommended_policies': '推荐政策',
        'saved_policies': '收藏政策',
        'notification_center': '通知中心',
        'personal_analytics': '个人分析',
        'policy_overview': '政策概览',
        'impact_analysis': '影响分析',
        'public_engagement': '公众参与',
        'regulatory_compliance': '监管合规',
        'inter_agency_communication': '机构间沟通',
        'research_overview': '研究概览',
        'data_analysis': '数据分析',
        'collaboration_hub': '协作中心',
        'publication_tracker': '发表跟踪',
        'advanced_search': '高级搜索'
      }
      return nameMap[section] || section
    }
    
    return {
      ts,
      showSwitcher,
      currentUser,
      userTypeConfigs,
      getUserIcon,
      getUserTypeConfig,
      switchUserType,
      demoLogin,
      getFeatureName,
      getServiceName,
      getSectionName
    }
  }
}
</script>

<style scoped>
.user-type-switcher {
  @apply relative;
}

.user-type-card {
  @apply relative;
}

.glass-card {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 245, 255, 0.2);
}
</style> 